<template>
  <view class="upload flex flex-col justify-center">
    <image class="upload-bg" src="https://app5.shuguostar.cn/imgs/images/answer/bg.png" />
    <image class="upload-id" src="https://app5.shuguostar.cn/imgs/images/login/IP.png" />
    <NavigationBar navigation-title="上传作业" />

    <view class="upload-content">
      <view class="upload-content-wrap">
        <text class="upload-title">
          上传作业
        </text>
        <view class="book-title flex">
          <text class="label">
            阅读书籍
          </text>
          <text class="name flex-1">
            {{ `《${homeWork?.bookName}》` }}
          </text>
        </view>
        <text class="upload-info">
          {{ homeWork?.jobReq }}
        </text>

        <Upload v-model:list="fileList">
          <view v-if="!fileList.length" class="upload-wrap flex flex-col items-center justify-center">
            <image class="upload-icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_upload.png" />
            <text class="upload-text">
              可上传图片视频
            </text>
          </view>
          <view v-else class="upload-small-wrap flex items-center justify-center">
            <image class="upload-icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_upload.png" />
          </view>
        </Upload>

        <view v-if="homeWork?.detailList?.length" class="upload-list">
          <text class="list-title">
            已上传作业
          </text>

          <view v-if="homeWork?.assigEvaluate" class="list-reviews">
            <text class="label">
              老师点评
            </text>
            <text class="content">
              {{ homeWork?.assigEvaluate }}
            </text>
            <text class="time">
              {{ homeWork?.assigEvaluateTime }}
            </text>
          </view>

          <view v-for="item in homeWork?.detailList" :key="item.id" class="list-img-item">
            <view class="item-wrap">
              <view class="item-box flex flex-wrap">
                <template v-for="(file, index) in item.fileList">
                  <image v-if="file.type === 'img'" :key="index" class="item-img" :class="[item.fileList.length === 1 ? 'big-img' : 'small-img']" mode="aspectFill" :src="file.url" />
                  <video v-if="file.type === 'video'" :key="index" class="item-video" :class="[item.fileList.length === 1 ? 'big-video' : 'small-video']" :src="file.url" />
                </template>
              </view>
              <view class="item-time">
                {{ item.createTime }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="upload-btn flex justify-between">
      <text class="btn btn-left" @click="goBack">
        关闭
      </text>
      <text class="btn btn-right" @click="submit">
        上传
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavigationBar from '@/components/navigation-bar/index.vue';
import type { FILE } from '@/components/upload/index.vue';
import Upload from '@/components/upload/index.vue';
import { getHomeWork, uploadHomeWork } from '@/api/read';
import type { DetailList, HomeWorkResult } from '@/api/read/type';

const goBack = () => {
  uni.navigateBack();
};

const acsId = ref<string>('');
const fileList = ref<Array<FILE>>([]);

const homeWork = ref<HomeWorkResult>();
const getData = () => {
  getHomeWork({ courseId: acsId.value }).then((res: HomeWorkResult) => {
    homeWork.value = res;
    if (homeWork.value?.detailList) {
      homeWork.value?.detailList.forEach((item: DetailList) => {
        item.fileList = item.assigPic.split(',');
        item.fileList = item.fileList.map((file: any) => {
          const imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
          return {
            url: file,
            type: imageExtensions.includes(file.split('.').pop().toLowerCase()) ? 'img' : 'video',
          };
        });
      });
    }
  });
};

const submit = () => {
  const data: { id: string; assigPic: string } = {
    id: homeWork.value!.id,
    assigPic: fileList.value.map((item: any) => item.url).join(','),
  };

  uploadHomeWork(data).then(() => {
    uni.$u.toast('上传成功');
    fileList.value = [];
    getData();
  });
};

onReady(() => {
  uni.createVideoContext('myVideo');
});

onLoad((option: any) => {
  acsId.value = option.acsId;
  getData();
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
.upload {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 396rpx;
  background: linear-gradient( 90deg, #4FB0FE 0%, #2B9BF6 100%);
  overflow: hidden;

  .upload-bg {
    position: absolute;
    top: 100rpx;
    left: 36rpx;
    width: 666rpx;
    height: 134rpx;
  }

  .upload-id {
    position: absolute;
    top: 128rpx;
    left: 214rpx;
    width: 280rpx;
    height: 376rpx;
    z-index: 1;
  }

  .upload-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 114rpx;
    background: #fff;
    border-radius: 100rpx;

    .upload-content-wrap {
      height: 100%;
      padding: 0 40rpx 244rpx 40rpx;
      overflow: auto;
    }

    .upload-title {
      position: relative;
      font-size: 36rpx;
      line-height: 50rpx;
      font-weight: 500;
      color: #0F172A;
      z-index: 1;
    }

    .book-title {
      padding: 40rpx 0;

      .label {
        position: relative;
        width: 304rpx;
        padding-left: 32rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #666666;

        &::after {
          content: '';
          position: absolute;
          top: 12rpx;
          left: 0;
          width: 16rpx;
          height: 16rpx;
          background: #4AAAF8;
          border-radius: 50%;
        }
      }

      .name {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333333;
      }
    }

    .upload-info {
      font-size: 32rpx;
      line-height: 44rpx;
      color: #666666;
    }

    .upload-wrap {
      position: relative;
      width: 656rpx;
      height: 420rpx;
      background: #F5F6F9;
      border-radius: 30rpx;

      .upload-icon {
        width: 64rpx;
        height: 64rpx;
      }

      .upload-text {
        padding-top: 32rpx;
        font-size: 26rpx;
        text-align: center;
        line-height: 44rpx;
        color: #888888;
      }
    }

    .upload-small-wrap {
      width: 218rpx;
      height: 218rpx;
      margin: 4rpx;
      background: #F5F6F9;
      border-radius: 8rpx;

      .upload-icon {
        width: 64rpx;
        height: 64rpx;
      }
    }

    .upload-list {
      .list-title {
        font-size: 36rpx;
        line-height: 50rpx;
        font-weight: 500;
        color: #0F172A;
      }

      .list-reviews {
        position: relative;
        padding: 32rpx;
        margin-top: 74rpx;
        background: #F0F0F0;
        border-radius: 8rpx;

        .label {
          position: absolute;
          top: -28rpx;
          left: 0;
          padding: 0 16rpx;

          font-size: 28rpx;
          line-height: 56rpx;
          color: #fff;
          background: #22BF57;
          border-radius: 32rpx 0rpx 32rpx 0rpx;
        }

        .content {
          display: block;
          font-size: 32rpx;
          line-height: 44rpx;
          color: #333333;
        }

        .time {
          display: block;
          padding-top: 16rpx;
          font-size: 24rpx;
          text-align: right;
          line-height: 36rpx;
          color: #888888;
        }
      }

      .list-img-item {
        width: 100%;
        margin-top: 40rpx;
        padding: 32rpx;
        background: #F0F0F0;
        border-radius: 16rpx;

        &::marker {
          content: '';
          width: 0 !important;
          height: 0 !important;
        }

        .item-wrap {
          width: 100%;
          padding: 8rpx;
          background: #fff;
          border-radius: 16rpx;

          .item-box {

            .item-img, .item-video {
              width: 100%;
              height: 324rpx;
              object-fit: cover;
              border-radius: 8rpx;
            }

            .small-img, .small-video {
              width: 188rpx;
              height: 188rpx;
              margin: 4rpx;
              object-fit: cover;
              border-radius: 8rpx;
            }
          }

          .item-time {
            padding-top: 16rpx;
            font-size: 24rpx;
            text-align: right;
            line-height: 36rpx;
            color: #888888;
          }
        }
      }
    }
  }

  .upload-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16rpx 40rpx;
    background: #fff;
    z-index: 99;

    .btn {
      width: 316rpx;
      height: 96rpx;
      border-radius: 48rpx;
    }

    .btn-left {
      font-size: 32rpx;
      text-align: center;
      line-height: 92rpx;
      background: #fff;
      color: #4AAAF8;
      border: 2rpx solid #4AAAF8;
    }

    .btn-right {
      font-size: 32rpx;
      text-align: center;
      line-height: 96rpx;
      background: #4AAAF8;
      color: #fff;
    }
  }
}

:deep(.u-upload__wrap) {
  margin: 76rpx 0 !important;
  // padding: 0 -4rpx !important;
  width: 678rpx;
  position: relative;
  left: -4rpx;
  // justify-content: space-between;

  .u-upload__wrap__preview {
    border-radius: 8rpx !important;
    margin: 4rpx !important;
    overflow: hidden;

    .u-upload__wrap__preview__other, .u-upload__wrap__preview__image {
      width: 218rpx !important;
      height: 218rpx !important;
    }

    .u-upload__deletable {
      width: 32rpx !important;
      height: 32rpx !important;
      border-top-right-radius: 8rpx !important;

      .u-upload__deletable__icon {
        transform: scale(0.6) !important;
        top: -2rpx !important;
        right: -2rpx !important;
      }
    }

    .u-upload__success {
      display: none;
    }
  }
}
</style>
